<template>
	<div class="wrapper">
		<div class="dis">
			<div class="main">
				<div class="dia">
					<div class="line">

					</div>
					<div class="basic">
						基本信息
					</div>
				</div>
				<div class="main_line">

				</div>
				<div class="">
					<van-field v-model="agentPhoneNo" label="手机号" placeholder="作为登录帐号" :border="false" />
					<van-field v-model="agentName" label="代理商名称" placeholder="请输入代理商名称" :border="false" />
					<van-field v-model="password" label="设置密码" placeholder="作为登录密码" :border="false" />
				</div>
			</div>
		</div>
		<div class="dis">
			<div class="main">
				<div class="dia">
					<div class="line">

					</div>
					<div class="basic">
						认证信息
					</div>
				</div>
				<div class="main_line">

				</div>
				<div class="">
					<van-field v-model="agentIdCardName" label="姓名" placeholder="请输入姓名" :border="false" />
					<van-field v-model="agentIdCardNo" label="身份证号" placeholder="请输入身份证号" :border="false" />
				</div>
				<div class="info">
					<div class="form">
						<div class="upload">
							<div class="left" @click="info">
								<van-uploader :before-read="file => afterReadUploadImg(file, 'agentIdCardFront')">
									<img class="uploadImg"
										:src="agentIdCardFront ? agentIdCardFront : 'https://mtpospay.com/cardz.png'"
										alt="" />
								</van-uploader>
								<div class="uploader_title">身份证人像照</div>
							</div>
							<div class="right">
								<van-uploader :before-read="file => afterReadUploadImg(file, 'agentIdCardBack')">
									<img class="uploadImg"
										:src="agentIdCardBack ? agentIdCardBack : 'https://mtpospay.com/cardf.png'"
										alt="" />
								</van-uploader>
								<div class="uploader_title">身份证国徽照</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="dis">
			<div class="main">
				<div class="dia">
					<div class="line">

					</div>
					<div class="basic">
						结算信息
					</div>
				</div>
				<div class="main_line">

				</div>
				<div class="">
					<van-field v-model="bankCardNo" label="卡号" placeholder="请输入卡号" :border="false" @blur="deposit" />
					<van-field v-model="bankCardName" label="开户行" placeholder="请输入开户行" :border="false"
						:disabled="true" />
					<van-field v-model="bankCardPhone" label="手机号" placeholder="请输入银行预留手机号" :border="false" />
				</div>
			</div>
		</div>
		<div class="btn_box dis">
			<div class="btn dis" @click="submit">
				提交
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getCardBin,
		addAgent
	} from '@/api/terminal'
	import axios from 'axios'
	import md5 from 'js-md5/src/md5.js'
	import {
		convertImg
	} from '../../utils/compressor.js'
	import store from '@/store'
	import {
		showToast
	} from 'vant'
	import idCardFront from '@/assets/auth/cardface.png'
	import idCardBack from '@/assets/terminal/card.png'
	// import bankCardFront from '@/assets/auth/bank.png'
	export default defineComponent({
		name: 'sateActive',
		setup() {
			const router = useRouter()
			const state = reactive({

			})

			const info = reactive({
				parentNo: store.state.user.agentNo,
				agentPhoneNo: "",
				password: "",
				agentName:"",
				agentIdCardFront: "",
				agentIdCardBack: "",
				agentIdCardName: "",
				agentIdCardNo: "",
				bankCardNo: "",
				bankCardName: "",
				bankCardPhone: "",
			})
			const deposit=()=>{
				getCardBin({
					cardNo:info.bankCardNo
				}).then(res => {
					info.bankCardName=res.data.issnam
					
				})
			}
			const submit = () => {
				info.password=md5(info.password )
				addAgent(info).then(res => {
					showToast('添加成功')
					setTimeout(()=>{
						router.go(-1)
					},2000)
					
				})
			}
			const afterReadUploadImg = (file, key) => {
				const formData = new FormData();
				formData.append('file', file);
				axios.post('http://xhbhs.cn:8888/app-service/file/addFile', formData, {
						headers: {
							'token': localStorage.getItem('token'),
							'sysType': 'app',
						}
					})
					.then(response => {
						console.log(response.data.data.url);
						if (key == 'agentIdCardFront') {
							info.agentIdCardFront = response.data.data.url
						} else {
							info.agentIdCardBack = response.data.data.url
						}
					})
					.catch(error => {
						console.error(error);
					});
			}
			return {
				...toRefs(state),
				...toRefs(info),
				submit,
				deposit,
				afterReadUploadImg
			}
		}
	})
</script>
<style scoped lang="scss">
	.wrapper {
		.main {
			width: 339px;
			// height: 124px;
			background: #FFFFFF;
			padding: 13px 13px 11px 13px;
			box-sizing: border-box;
			margin-top: 12px;

			.line {
				width: 3px;
				height: 13px;
				background: #0257FF;
				border-radius: 2px;
			}

			.basic {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 12px;
				color: #869FFE;
				margin-left: 8px;
			}

			.main_line {
				width: 100%;
				height: 1px;
				border-bottom: 1px solid #F3F3F3;
				margin-top: 13px;
			}

			.card {
				margin-top: 12px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 12px;
				color: #869FFE;

				img {
					width: 133px;
					height: 92px;
				}
			}

			.info {
				margin-top: 12px
			}

			.form {
				background: #fffffe;

				.uploader_title {
					text-align: center;
					padding: 10px;
					font-size: 12px;
					color: #869FFE;
				}

				.upload {
					// padding: 10px;
					display: flex;
					justify-content: space-between;

					.uploadImg {
						border-radius: 6px;
						width: 150px;
						height: 100px;
					}
				}

				.infoMax {
					padding: 0px 20px 10px 20px;
				}

				.info {
					background: #ffffff;
					box-shadow: 0px 0px 10px #ececec;
					opacity: 1;
					border-radius: 20px;
					padding: 10px;
					display: flex;
					align-items: center;
					font-size: 12px;
					font-family: 'Avenir', Helvetica, Arial, sans-serif;

					span {
						margin-left: 5px;
					}

					font-weight: 400;
					color: #717882;
					opacity: 1;
				}
			}
		}
	}

	::v-deep .van-cell {
		padding: 10px 0px 0px 0px;
		box-sizing: border-box;
	}

	::v-deep .van-field__label {
		color: #333333 !important;
	}

	.btn_box {
		margin-top: 16px;

		.btn {
			width: 339px;
			height: 41px;
			background: #0257FF;
			border-radius: 6px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 15px;
			color: #FFFFFF;
		}
	}
</style>